<template>
  <div ref="earthRef" class="earth" />
</template>

<script lang="ts" setup>
import { onBeforeUnmount, onMounted, ref, watch } from "vue";
import * as echarts from "echarts/core";
import { CanvasRenderer } from "echarts/renderers";
import { Lines3DChart, Scatter3DChart } from "echarts-gl/charts";
import { GlobeComponent } from "echarts-gl/components";
import config from "./config";

echarts.use([GlobeComponent, Lines3DChart, Scatter3DChart, CanvasRenderer]);

const props = defineProps<{
  lineData: Record<any, Array<number>>;
}>();

const earthRef = ref<HTMLElement | null>(null);
let earth: echarts.ECharts | null = null;

const earthInit = () => {
  if (earthRef.value) {
    earth = echarts.init(earthRef.value);
  }
};

const chartsResize = (data: any[]) => {
  const options: any = config;
  options.series[0].data = data;
  // 使用刚指定的配置项和数据显示图表。
  earth && earth.setOption(options, true);
};

watch(props.lineData, (newValue: any) => {
  chartsResize(newValue.data);
});

onMounted(() => {
  earthInit();
  window.addEventListener("resize", () => {
    earth && earth.resize();
  });
});

onBeforeUnmount(() => {
  window.removeEventListener("resize", () => {
    earth && earth.resize();
  });
});
</script>

<style lang="less" scoped>
.earth {
  width: 100%;
  height: 100%;
}
</style>
